<template>
  <div class="left">
    <div class="row1">
      <div class="title_name">
        <span>园区绿化室</span><span class="eng">Park greening room</span>
      </div>
      <div class="bbox">
        <div class="line_box">
          <img src="../../public/img/are.png" class="licon" />
          <div class="lname">绿化面积</div>
          <div class="lnum">1676.15 <span class="dw">公顷</span></div>
        </div>
      </div>
    </div>
    <div class="row2">
      <div class="title_name">
        <span>园区绿化室</span><span class="eng">Park greening room</span>
      </div>
      <div class="bbox">
        <div id="loop"></div>
      </div>
    </div>
    <div class="row3">
      <div class="title_name">
        <span>生产废料利用率</span
        ><span class="eng">Production waste treatment</span>
      </div>
      <div class="bbox">
        <img src="../../public/img/cle.png" class="pie" />
        <div class="btm_list">
          <img src="../../public/img/pie.png" class="img_box" />
          <div class="wa_name">生产废料总数</div>
          <div class="wa_namer">
            <span class="name_r_num">22</span>
            <span>项</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="r_row1">
      <div class="title_name">
        <span>主要功能绿化室</span
        ><span class="eng">Main functions Greening</span>
      </div>
      <div id="line"></div>
    </div>
    <div class="r_row2">
      <div class="title_name">
        <span>接待考察</span
        ><span class="eng">Reception and investigation</span>
      </div>
      <div class="bbox">
        <div class="img_list">
          <img src="../../public/img/pic1.png" class="list_item" />
          <img src="../../public/img/pic2.png" class="list_item" />
          <img src="../../public/img/pic3.png" class="list_item" />
          <img src="../../public/img/pic4.png" class="list_item" />
          <img src="../../public/img/pic5.png" class="list_item" />
          <img src="../../public/img/pic6.png" class="list_item" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getLoop7, getLine1 } from "@/utils/getecharts"
export default {
  data() {
    return {
    }
  },
  methods: {

  },
  mounted() {
    echarts.init(document.getElementById("loop")).dispose()
    var myChart = echarts.init(document.getElementById('loop'));
    getLoop7(myChart)
    echarts.init(document.getElementById("line")).dispose()
    var myChart = echarts.init(document.getElementById('line'));
    getLine1(myChart)

  }
}
</script>

<style scoped>
.row1 {
  width: 407px;
  height: 161px;
  background: url("../../public/img/bigtitle.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-left: 30px;
  margin-top: 10px;
}
.row2 {
  width: 407px;
  height: 314px;
  background: url("../../public/img/bigtitle.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-left: 30px;
  margin-top: 10px;
}
.row3 {
  width: 407px;
  height: 375px;
  background: url("../../public/img/bigtitle.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-left: 30px;
  margin-top: 10px;
}
.title_name {
  width: 100%;
  height: 50px;
  font-size: 22px;
  color: white;
  font-weight: bolder;
  box-sizing: border-box;
  padding: 10px 10px 10px 20px;

  z-index: 5;
}
.eng {
  font-size: 14px;
  margin-left: 10px;
}
.licon {
  width: 31px;
  height: 31px;
}
.line_box {
  margin-top: 30px;
  display: flex;
  align-items: center;
  padding: 0 50px;
}
.lname {
  color: white;
  font-size: 18px;
  margin-left: 5px;
}
.lnum {
  margin-left: 50px;
  color: white;
  font-size: 26px;
}
.dw {
  font-size: 14px;
  color: white;
}
#loop {
  width: 302px;
  height: 189px;
  margin-left: 40px;
  margin-top: 40px;
}
#line {
  width: 363px;
  height: 251px;
  margin-top: 20px;
  margin-left: 10px;
}
.pie {
  width: 177px;
  height: 177px;
  margin-left: 100px;
  margin-top: 40px;
}
.btm_list {
  height: 31px;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: white;
  box-sizing: border-box;
  padding: 0 40px;
  margin-top: 50px;
}
.img_box {
  width: 30px;
  height: 28px;
}
.wa_name {
  margin-left: 10px;
}
.wa_namer {
  margin-left: 60px;
  margin-top: -8px;
}
.name_r_num {
  font-size: 26px;
  margin: 0 5px;
}
.right {
  position: absolute;
  right: 30px;
  top: 110px;
}
.r_row1 {
  width: 407px;
  height: 346px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
}
.r_row2 {
  width: 407px;
  height: 519px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
}
.img_list {
  display: flex;
  flex-wrap: wrap;
}
.list_item {
  width: 145px;
  height: 125px;
  margin-top: 24px;
  margin-left: 38px;
}
</style>